<template>
    <div class="module-page" v-loading="loading">
        <div v-if="$auth['setting_group_refresh']" class="header flex-row flex-item">
            <div class="flex1"></div>
            <div class="right-btn">
                <el-button style="margin-left: 10px"
                           type="primary"
                           @click="refreshGroup"
                           size="small">刷新分组数据</el-button>
            </div>
        </div>
        <tz-table
                ref="tzTable"
                highlight-current-row
                :pagination="false"
                size="mini"
                :data="loadData">
            <el-table-column
                    prop="groupName"
                    show-overflow-tooltip
                    label="分组">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    show-overflow-tooltip
                    label="创建时间"
                    :formatter="(row) => {
                       return moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
                     }">
            </el-table-column>
        </tz-table>
    </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'groupList',
  data() {
    return {
      moment,
      loading: false
    }
  },
  methods: {
    loadData() {
      return this.$http.get('/sys/user/getGroupList').then(res => {
        return {
          data: res || []
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取列表失败')
      })
    },
    refreshGroup() {
      this.loading = true
      this.$http.get('/sys/user/refrashGroup').then(() => {
        this.$TZmessage.success('操作成功')
        this.$refs.tzTable.refresh(true)
      }
      ).catch(err => {
        this.$TZmessage.error(err.msg || '操作失败')
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .module-page {
        padding: 0 27px;
        width: 100%;
        box-sizing: border-box;
        overflow: auto;
        .header {
            height: 69px;
            position: relative;
        }
    }
</style>